<template>
    <el-aside width="20%">
        <div class="aside-header">
            菜品类别
        </div>
        <div class="aside-container">
            <ul>
                <!-- <li>炒菜</li>
                <li>蒸菜</li> -->
                <li v-for="item in childArr" :key='item.id'  @click="getItem(item)">{{item.category}}</li>
            </ul>
        </div>
    </el-aside>
</template>

<script>
export default {
    data(){
        return{
            childArr:[],
        }
    },
    methods:{
        getItem(item){
            this.$emit('sendDishType',item.id);//向父组件发送数据
        }
    },
    mounted(){
        this.axios.get('/stock/type').then((res)=>{
            let sta=res.data.data;
           
            for(let i in sta){
                this.childArr.push(sta[i])
            }
        })
    }
}
</script>

<style lang="less" scoped>
    .el-aside{
        font-size: 1.4rem;
        border: 0.1rem solid #dbe0e9;
        height: 100%;//设置高度  不会随右边的table高度影响
        .aside-header{
            padding: 1.2rem 0;
            background: #F2F2F2;
            display:flex;
            justify-content:center;
            align-items:center
        }
        .aside-container ul li{
            padding: 1rem 0;
            display:flex;
            justify-content:center;
            align-items:center;
            border-bottom: 1px solid #F2F2F2;
            cursor:pointer;
            width: 100%;
            &:hover{
                background: #F5F7FA;
            }
        }
        .aside-container ul li:last-child{
            border-bottom: none;
        }
    }
</style>